<!DOCTYPE html>
<html lang="en">
<#assign ctx = request.contextPath />
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="${ctx}/static/mcCourse/css/Collage.css?v=2" rel="stylesheet">
    <title>${detail.title}</title>
    <style>
        *{
            box-sizing:border-box;
        }
        html,body{
            margin: 0;
            padding: 0;
            border: 0;
            width: 100%;
            height: 100%;
            background:rgba(245,245,245,1);
        }
        a{
            text-decoration: none;
            color:rgba(153,153,153,1);
        }
        ul{
            margin: 0;
            list-style: none;
            padding: 0;
        }
        /* 下载导航开始 */
        .Navbar{
            width: 100%;
            height:1rem;
            background:rgba(255,255,255,1);
            display: -webkit-flex;
            display: flex;
            justify-content: center;
        }
        .NavLeft{
            width: 50%;
            height: 100%;
            padding: .13rem 0 0 .13rem;
        }
        .NavLeft .logo{
            height: .7rem;
        }
        .Navright{
            width: 50%;
            text-align: right;
            line-height: 1rem;
            padding-right: .13rem;
        }
        .Address{
            height: .6rem;
            background:rgba(255,228,13,1);
            border:2px solid rgba(255,228,13,1);
            border-radius:8px;
        }
        /* 下载导航结束 */
        .Swiper{
            width: 100%;
            height: 4.30rem;
            background: red;
            background-size: contain;
        }
        .Begins{
            padding: .30rem .24rem .14rem .24rem;
            background: white;
        }
        .BeginsTitle{
            font-size:.36rem;
            font-family:PingFangSC-Medium;
            font-weight:500;
            color:rgba(51,51,51,1);
            margin-bottom: .23rem;
        }
        .BeginsMassage{
            display: -webkit-flex;
            display: flex;
            justify-content: space-between;
        }
        .BeginsTiem{
            font-size:.28rem;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(153,153,153,1);
        }
        .BeginsNumber{
            font-size:.28rem;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(123,219,136,1);
        }
        .BeginsStart{
            padding: .26rem 0rem;
            display: -webkit-flex;
            display: flex;
            justify-content: space-between;
        }
        .PriceBorder{
            color:rgba(250,100,100,1);
            font-size:.36rem;
            font-family:PingFangSC-Medium;
            margin-right: .20rem;
        }
        .PeopleBorder{
            font-size:.28rem;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(153,153,153,1);
        }
        .Sales{
            font-size:.28rem;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(153,153,153,1);
        }
        .SalesTiem{
            font-size:.28rem;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:#FA6464;
        }
        .Delegation{
            margin-top:.25rem;
            background: white;
            font-size: .28rem;
        }
        .More{
            display: -webkit-flex;
            display: flex;
            justify-content: space-between;
            padding: .26rem .24rem;
        }
        .PeopleMassage{
            /* height: 1.20rem; */
            width: 100%;
            background: white;
            /* display: -webkit-flex;
            display: flex; */
        }
        .PeopleTiemBoder{
            width: 94%;
            margin: 0 auto;
            background: white;
            display: -webkit-flex;
            display: flex;
            border-bottom: 2px solid rgba(240,240,240,1);
            height: 1.20rem;
        }
        .PeopleTiemBoder:last-child{
            border: none;
        }
        .UserMage{
            width: 50%;
            display: flex;
            display: -webkit-flex;
            align-items: center;
        }
        .UserImage{
            height: .6rem;
        }
        .UserName{
            font-size:.28rem;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(26,26,26,1);
            vertical-align: middle;
            margin-left: .21rem;
        }
        .PeopleTiem{
            width: 50%;
            display: -webkit-flex;
            display: flex;
            align-items: flex-end;
            flex-direction: column;
            justify-content: center;
        }
        .ColdeRen{
            color: #FA6464;
        }
        .UserPeopleNumber{
            color: #FA6464;
        }
        .UserPeople{
            font-size:.24rem;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(26,26,26,1);
        }
        .Surplus{
            font-size:.24rem;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(153,153,153,1);
        }
        /* 选项卡 */
        .Introduce{
            width: 100%;
            margin-top:.20rem;
            background: white;
            margin-bottom: .98rem;
        }
        .IntroduceContext {
            margin:0;
            padding:0;
            width: 100%;
            display:none;
        }
        /* 课程介绍开始 */
        .IntroduceImage{
            margin:.15rem 0 .15rem 0;
            width: 100%;
            border: 1px solid black;
        }
        /* 课程介绍结束 */
        /* 课程表 */
        .CourseClass{
            border-bottom: 1px solid lightgray;
            height: 1.2rem;
            display: flex;
            display: -webkit-flex;
        }
        .CourseClass:last-child{
            border-bottom: none;
        }
        .CourseLeft{
            width: 80%;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            justify-content: center;
        }
        .CourseTitle{
            font-size:.28rem;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(26,26,26,1);
        }
        .CourseTiem{
            font-size:.24rem;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(153,153,153,1);
        }
        .CourseRight{
            width: 20%;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: center;
        }
        .TeacherPhopo{
            height: .60rem;
        }
        /* 课程表结束 */
        /* 老师介绍 */
        .TeacherExplainImage{
            width: 100%;
            border: 1px solid black;
            margin:.15rem 0 .15rem 0;
        }
        /* 老师介绍 */
        /* 评价开始 */
        .EvaluateContext{
            /* display: -webkit-flex;
            display: flex; */
            padding: .21rem 0 .21rem 0;
            border-bottom: 1px solid lightgray;
        }
        .EvaluateContext:last-child{
            border: none;
        }
        .EvaluateUser{
            display: -webkit-flex;
            display: flex;
            justify-content: space-between;
        }
        .EvaluateUserLeft{
            display: -webkit-flex;
            display: flex;
            align-items: center;
        }
        .EvaluateUserRight{
            display: -webkit-flex;
            display: flex;
            align-items: center;
            font-size:.24rem;
            font-family:SFProDisplay-Regular;
            font-weight:400;
            color:rgba(153,153,153,1);
        }
        .EvaluateUserPhopo{
            height: .60rem;
        }
        .EvaluateUserName{
            vertical-align: middle;
            margin-left: .21rem;
            font-size:.24rem;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(26,26,26,1);
        }
        .EvaluateText{
            text-indent: 2em;
            font-size:.28rem;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(26,26,26,1);
        }
        /* 评价结束 */
        .IntroduceSection{
            padding: .20rem;
        }
        .tab {
            margin:0;
            padding:0;
            list-style:none;
            width: 100%;
            overflow:hidden;
        }
        .tab li {
            float:left;
            width: 25%;
            height:.7rem;
            text-align:center;
            line-height:.7rem;
            cursor:pointer;
            font-size:.32rem;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(194,194,194,1);
        }
        .on {
            display:block;
        }
        .tab li.cur {
            border-bottom: 2px solid rgba(26,26,26,1);
            color: black;
        }
        /* 客服 */
        .Servier{
            height: .98rem;
            width: 100%;
            position: fixed;
            bottom: 0;
            display: flex;
            z-index: 996;
        }
        .Consultation{
            width: 20%;
            background: white;
            text-align: center;
        }
        .serviceImage{
            height:.52rem;
        }
        .ConsultationText{
            font-size:.22rem;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(26,26,26,1);
            display: block;
        }
        .Assemble{
            background:rgba(255,228,13,1);
            width: 80%;
            text-align: center;
            line-height: .98rem;
            font-size:.32rem;
            font-family:PingFangSC-Medium;
            font-weight:500;
            color:rgba(26,26,26,1);
        }
        /* z遮罩层 */
        .Have{
            display: none;
        }
        .mask{
            position: fixed;
            top:0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 997;
            background: black;
            opacity: .5;
        }
        .maskcContext{
            width: 80%;
            background: white;
            position: fixed;
            z-index: 998;
            top:calc(50% - (8rem / 2));
            left:calc(50% - (80% / 2));
            border-radius: 5px;
            height: 8rem;
        }
        .maskTitle{
            font-size:.32rem;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(26,26,26,1);
            text-align: center;
            padding: .35rem 0 .34rem 0;
            border-bottom: 1px solid lightgray;
        }
        .Close{
            position: absolute;
            height: .60rem;
            right: -.30rem;
            top: -.30rem;
        }
        .SpellList{
            width: 94%;
            margin: 0 auto;
            list-style: none;
            height: 6rem;
            overflow-x: scroll;
        }
        .ListMassage{
            height: 1.2rem;
            border-bottom: 1px solid lightgray;
            display: -webkit-flex;
            display: flex;
        }
        .ListMassage:last-child{
            border: none;
        }
        .ListLeft{
            width: 55%;
            height: 100%;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            margin-left: .10rem;
        }
        .UserNane{
            width: 2.40rem;
            white-space:nowrap;
            word-break:keep-all;
            overflow:hidden;
            text-overflow:ellipsis;
            margin-left: .20rem;
            font-size:.28rem;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(26,26,26,1);
        }
        .UserPhopo{
            height: .60rem;
        }
        .ListRight{
            width: 45%;
            font-size:.24rem;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(153,153,153,1);
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            justify-content: center;
        }
        /* 咨询 */
        .inquiry{
            display: none;
        }
        .inquiryAlert{
            width: 100%;
            height: 100%;
            opacity: .5;
            background: black;
            position: fixed;
            top:0;
            z-index: 996;
        }
        .WeChat{
            width: 70%;
            height: 5.9rem;
            position: fixed;
            z-index: 997;
            top:calc(50% - (5.9rem / 2));
            left: calc(50% - (70% / 2));
            background: white;
        }
        .erweima{
            width: 100%;
        }
        .Guanbi{
            width: .60rem;
            position: absolute;
            right: -.30rem;
            top:-.30rem;
        }
    </style>
    <script type="text/javascript" src="${ctx}/static/mcCourse/js/jquery-2.1.0.js"></script>
    <script type="text/javascript" src="${ctx}/static/mcCourse/js/basis.js"></script>
    <script>
        $(document).ready(function() {
            // 设置banner背景图
            $('.Swiper').css('background-image','url(${detail.cover_large_url})')
            // 遮罩层body滚动条静止
            $('.See').click(function(){
                console.log(00)
                $('.Have').show(0,function(){
                    $("body").css('overflow','hidden');
                })
            })
            $('.Close').click(function(){
                $('.Have').hide(0,function(){
                    $("body").css('overflow','scroll');
                })
            })
            // 二维码
            $('.Guanbi').click(function(){
                $('.inquiry').hide(0,function(){
                    $("body").css('overflow','scroll');
                })
            })
            $('.Consultation').click(function(){
                $('.inquiry').show(0,function(){
                    $("body").css('overflow','hidden');
                })
            })
            //  选项卡
            $(".tab li").click(function() {
                $(".tab li").eq($(this).index()).addClass("cur").siblings().removeClass('cur');
                $("div.IntroduceContext").hide().eq($(this).index()).show();
            });
        });
        function TimeDown(id, endDateStr) {
            //结束时间
            var endDate = new Date(endDateStr);
            //当前时间
            var nowDate = new Date();
            var DateTime = parseInt(endDate.getTime() - nowDate.getTime())/1000;

            //相差的总秒数
            var totalSeconds = parseInt((endDate - nowDate) / 1000);
            //天数
            var days = Math.floor(totalSeconds / (60 * 60 * 24));
            //取模（余数）
            var modulo = totalSeconds % (60 * 60 * 24);
            //小时数
            var hours = Math.floor(modulo / (60 * 60));
            modulo = modulo % (60 * 60);
            //分钟
            var minutes = Math.floor(modulo / 60);
            //秒
            var seconds = modulo % 60;
            //输出到页面
            document.getElementById(id).innerHTML =  days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒";
            //延迟一秒执行自己
            var MyTiem = setTimeout(function () {
                TimeDown(id, endDateStr);
            }, 1000)
            if(DateTime <= 0){
                document.getElementById(id).innerHTML = "已结束";
                clearInterval(MyTiem);
            }
        }
        // id  时间
//        TimeDown("show", "2018-12-22 13:40:45");
    </script>
</head>
<body>
<div class="main">
    <!-- 下载导航 -->
    <div class="Navbar">
        <div class="NavLeft">
            <img class="logo" src="${ctx}/static/mcCourse/img/logo.png" alt="">
        </div>
        <div class="Navright">
            <a target="_blank" href="javascript:window.location='http://a.app.qq.com/o/simple.jsp?pkgname=com.waijiaojun';"><button class="Address">下载APP</button></a>
        </div>
    </div>
    <!-- banner -->
    <div class="Banner">
        <div class="Swiper"></div>
        <div class="Begins">
            <div class="BeginsTitle">${detail.title}</div>
            <div class="BeginsMassage">
                <div class="BeginsTiem">开课时间：${detail.course_start_time?string('MM月dd日')}-${detail.course_end_time?string('MM月dd日')}</div>
                <div class="BeginsNumber">${detail.cou_size}课时</div>
            </div>
            <div class="BeginsStart">
                <div class="Price">
                    <span class="PriceBorder">￥<span class="PriceNumber">${detail.price}</span></span>
                    <span class="PeopleBorder">剩余<span class="PeopleNumber">${detail.max_buy_user_number - detail.actual_buy_user_number}</span>人</span>
                </div>
                <div class="StartTiem">
                    <span class="Sales">距离停售 <span class="SalesTiem" id="courseCountdown"></span> </span>
                </div>
            </div>
        </div>
    </div>
    <!-- 参团人数 -->
    <div class="Delegation">
        <!-- 正在拼团和查看更多 -->
        <div class="More">
            <div class="Being"><span class="BeingNumber">${detail.group_user_number}</span>人正在拼团，可直接参与</div>
            <div class="See"><a href="#">查看更多</a></div>
        </div>
        <!-- 拼团的人 -->
        <div class="PeopleMassage">
<#list detail.groups as group>
            <#if group_index == 2>
                <#break>
            </#if>
            <div class="PeopleTiemBoder">
                <div class="UserMage">
                    <img class="UserImage" src="${group.memb_head_portrait}" alt="headerIMg">
                    <span class="UserName">${group.memb_name}</span>
                </div>
                <div class="PeopleTiem">
                    <div class="UserPeople">还差<span class="UserPeopleNumber">${group.remain_user_size}</span><span class="ColdeRen">人</span>拼成</div>
                    <div class="Surplus">剩余：<span class="SurplusTime" id="group_show_countdown_${group_index}"></span></div>
                    <script type="text/javascript">
                        var targetElementId ="group_show_countdown_${group_index}";
                        var endTime = "${group.end_time?string('yyyy/MM/dd,HH:mm:ss')}";
                        TimeDown(targetElementId,endTime);//2019-2-4,00:00:00
                    </script>
                </div>
            </div>
</#list>
        </div>
    </div>
    <!-- 课程介绍的一些内容 -->
    <div class="Introduce">
        <ul class="tab">
            <li class="cur">课程介绍</li>
            <li >课程表</li>
            <li >老师介绍</li>
            <li >评价</li>
        </ul>
        <!-- 课程介绍  -->
        <div class="IntroduceSection">
            <div class="IntroduceContext  on">
                ${detail.detail_image_html}
            </div>
            <!-- 课程表 -->
            <div class="IntroduceContext">
                <ul class="Course">
<#list detail.course_schedule as schedule>
                    <li class="CourseClass">
                        <div class="CourseLeft">
                            <div class="CourseTitle">${schedule.title}</div>
                            <div class="CourseTiem">
                                <span class="month">${schedule.start_time?string('MM月dd日')}</span>
                                <span class="Date19:00-20:00"></span>,
                                <span class="TeacherName">${schedule.tea_name}</span>
                            </div>
                        </div>
                        <div class="CourseRight">
                            <img class="TeacherPhopo" src="${schedule.tea_head_portrait}">
                        </div>
                    </li>
</#list>
                </ul>
            </div>
            <!-- 老师介绍 -->
            <div class="IntroduceContext">
                <div class="TeacherExplain">
                    ${detail.teacher_intro_image_html}
                </div>
            </div>
            <!-- 评价 -->
            <div class="IntroduceContext">
                <ul class="Evaluate">
<#list detail.course_comments as comment>
                    <li class="EvaluateContext">
                        <div class="EvaluateUser">
                            <div class="EvaluateUserLeft">
                                <img class="EvaluateUserPhopo" src="${comment.memb_head_portrait}">
                                <span class="EvaluateUserName" class="">${comment.memb_name}</span>
                            </div>
                            <div class="EvaluateUserRight">${comment.create_date?string('MM.dd')}</div>
                        </div>
                        <div class="EvaluateText">${comment.content}</div>
                    </li>
</#list>
                </ul>
            </div>
        </div>
    </div>
    <!-- 客服拼团 -->
    <div class="Servier">
        <div class="Consultation">
            <img class="serviceImage" src="${ctx}/static/mcCourse/img/service.png">
            <span class="ConsultationText">咨询</span>
        </div>
        <div class="Assemble">三人拼团¥${detail.group_price}元</div>
    </div>
    <!-- 遮罩层 -->
    <div class="Have">
        <div class="mask"></div>
        <div class="maskcContext">
            <div class="maskTitle">
                正在拼单
                <img class="Close" src="${ctx}/static/mcCourse/img/icon_guanbi.png" alt="Close">
            </div>
            <div class="Spell">
                <ul class="SpellList">
<#list detail.groups as group>
                    <li class="ListMassage">
                        <div class="ListLeft">
                            <img class="UserPhopo" src="${group.memb_head_portrait}" alt="UserIMG">
                            <span class="UserNane">${group.memb_name}</span>
                        </div>
                        <div class="ListRight">
                            <div class="RightPeople">
                                还差 <span class="RightNumber">${group.remain_user_size}</span> 人拼成
                            </div>
                            <div class="RightTiem">
                                剩余：<span class="OverTiem" id="group_showAllDiaglog_countdown_${group_index}">${group.end_time?string('MM.dd')}</span>
                                <script type="text/javascript">
                                   var targetElementId ="group_showAllDiaglog_countdown_${group_index}";
                                   var endTime = "${group.end_time?string('yyyy/MM/dd,HH:mm:ss')}";
                                   TimeDown(targetElementId,endTime);//2019-2-4,00:00:00
                                </script>
                            </div>
                        </div>
                    </li>
</#list>
                </ul>
            </div>
        </div>
    </div>

    <!-- 咨询 -->
    <div class="inquiry">
        <div class="inquiryAlert"></div>
        <div class="WeChat">
            <img class="Guanbi" src="${ctx}/static/mcCourse/img/icon_guanbi.png" alt="Close">
            <img class="erweima" src="${ctx}/static/mcCourse/img/erweima.png" alt="erweima">
        </div>
    </div>
</body>

<script type="text/javascript">
    var targetElementId ="courseCountdown";
    var endTime = "${detail.sale_end_time?string('yyyy/MM/dd,HH:mm:ss')}";
    TimeDown(targetElementId,endTime);
</script>
</html>